<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml"
	xmlns:s="http://sduept.security.el/func">
	<ui:define name="head">
		<link rel="stylesheet" href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>

.ui-datatable-scrollable-header-box {
	margin-left: 0px;
	margin-right: 15px !important;
}

#accountInfo .box-header {
	padding: 19px;
}

#statistics .box-title {
	font-size: 16px;
}

#vol p:nth-child(2) {
	font-size: 15px;
}

select {
	color: black;
}

.ui-autocomplete-input {
	width: 100%;
}

.failedUpload {
	color: red;
}

.autoUpload {
	color: green;
}

.manualUpload {
	color: orange;
}

.displayStyle {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}


.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 5px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.col-xs-12 {
    width: 100%;
    height: 420px;
}


</style>
	</ui:define>
	<ui:define name="content">
		<div class="box box-solid with-border">
		<!-- <div class='full-center-content-scroll-noheader'> -->
			<div class="nav-tabs-custom">
				<ul id="tabs" class="nav nav-tabs pull-left ">
					<li class="active"><a href="#lineFaultsCountTab" id="lineFaultTab" data-toggle="tab">线路故障</a></li>
					<li><a href="#busFaultsCountTab" data-toggle="tab" id="busFaultTab" onclick="loadBusData()">母线故障</a></li>
					<li><a href="#transFaultsCountTab" data-toggle="tab" id="transFaultTab"  onclick="loadTransformData()">变压器故障</a></li>
					<!-- <li><a href="#faultsCountTab" data-toggle="tab" onclick="loadSummaryData()">故障统计</a></li> -->
					<!-- 按月份统计 -->
					<li><a href="#faultsCountByMonthTab" data-toggle="tab" id="monthTab" onclick="loadMonthCountData()">故障信息上送率月统计</a></li>
					<!-- 按年统计 -->
					<li><a href="#faultsCountByYearTab" data-toggle="tab" id="yearTab" onclick="loadYearCountData()">故障信息上送率年统计</a></li>
				</ul>
				<h:form id="actionsForm">
					<p:commandButton id="busBtn"
						style="width:0;height:0;display:none" value="母线"
						actionListener="#{deviceFaultCountController.initBusData}"
						oncomplete="initDataTable();"
						update=":busFaultForm:busDetailTb" />
					<p:commandButton id="transBtn"
						style="width:0;height:0;display:none" value="变压器"
						actionListener="#{deviceFaultCountController.initTransformerData}"
						oncomplete="initDataTable();"
						update=":transFaultForm:transFormersTb" />
					<p:commandButton id="summaryBtn"
						style="width:0;height:0;display:none" value="统计"
						actionListener="#{deviceFaultCountController.initFaultCountData}"
						oncomplete="initDataTable();"
						update=":faultCountForm:monthDetailTable" />
					<p:commandButton id="monthCountBtn"
						style="width:0;height:0;display:none" value="月故障统计"
						actionListener="#{deviceFaultCountController.query()}"
						oncomplete="initDataTable();"
						update=":monthCountForm:faultCountTb" />
					<p:commandButton id="yearCountBtn"
						style="width:0;height:0;display:none" value="年故障统计"
						actionListener="#{deviceFaultCountController.queryCountTypeByYear()}"
						oncomplete="initDataTable();"
						update=":yearCountForm:faultCountDeptTb" />
						
				</h:form>
				<div class="tab-content no-padding">
					<!-- 线路故障 -->
					<div class="chart tab-pane active" id="lineFaultsCountTab" style="position: relative">
						<div class="box box-primary">
							<ui:include src="lineFaultCount.xhtml" />
						</div>
					</div>

					<!-- 母线故障 -->
					<div class="chart tab-pane" id="busFaultsCountTab" style="position: relative">
						<div class="box box-primary">
							<ui:include src="busbarFaultCount.xhtml" />
						</div>
					</div>
					
					<!-- 变压器故障 -->
					<div class="chart tab-pane" id="transFaultsCountTab" style="position: relative">
						<div class="box box-primary">
							<ui:include src="transformFaultCount.xhtml" />
						</div>
					</div>
					
					<!-- 故障统计 -->
					<div class="chart tab-pane" id="faultsCountTab" style="position: relative">
						<div class="box box-primary">
							<ui:include src="allFaultsCount.xhtml" />
						</div>
					</div>
					
					<!-- 月故障统计展示 -->
					<div class="chart tab-pane" id="faultsCountByMonthTab" style="position: relative">
						<div class="box box-primary">
							<ui:include src="faultsCountByMonth.xhtml" />
						</div>
					</div>
					
					<!-- 按照年统计故障 -->
					<div class="chart tab-pane" id="faultsCountByYearTab" style="position: relative">
						<div class="box box-primary">
							<ui:include src="faultsCountByYear.xhtml" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/datatables/jquery.dataTables.js" />
		<script src="deviceFault.js" />
		<script src="faultsCountByYear.js" />
		<script src="faultsCountByMonth.js" />
		<script src="lineFaultCount.js" />
		<script src="#{request.contextPath}/resources/js/mymodal.js" />
		<script src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js" />
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js" />
		<script src="#{request.contextPath}/resources/js/mycharts/categoryLineChart.js" />
		<script>
			function loadBusData(item) {
				var button = document.getElementById("actionsForm:busBtn");
				button.click();
			}

			function loadTransformData(item) {
				var button = document.getElementById("actionsForm:transBtn");
				button.click();
			}

			function loadSummaryData(item) {
				var button = document.getElementById("actionsForm:summaryBtn");
				button.click();
			}
			
			function loadMonthCountData() {
				initFaultCountTableYear();
				var button = document.getElementById("actionsForm:monthCountBtn");
				button.click();
			}
			
			function loadYearCountData() {
				initFaultCountChartDeptYear();
				var button = document.getElementById("actionsForm:yearCountBtn");
				button.click();
			}
			
			function start() {
				PF('statusDialog').show();
			}

			function stop() {
				PF('statusDialog').hide();
			}
			
			function completeOver() {
				PF('countInfoDialog').show();
				getChartData();
			}
			
			function showChart() {
				showOrHideDiv('divId')
				initFaultCountTableYear();
				initChart1DataByYearAndMonth();
			}

			function showOrHideDiv(divId) {
				var element = document.getElementById(divId);
				if(element.style.display=='none'){//如果是隐藏的
					element.style.display='block';//display属性设置为block（显示）
				} else {//如果show是显示的
					element.style.display='none';//display属性设置为none（隐藏）
				}
			}

			function showYearCountChart() {
				showOrHideDiv('chartDiv');
				initFaultCountChartDeptYear();
				initFaultCountByYearChartData();
			}
			
		</script>
	</ui:define>
</ui:composition>
